<template>
  <div style="
      width: 100%;
      height: 100vh;
      position: relative;
      overflow: hidden;
      display: flex;
      justify-content: center;
      box-sizing: border-box;
      padding-top: 8px;
    ">
    <div v-show="IsBottomOver && IsShowMain" class="TopTopOver" style="width: 98%; border-radius: 5px">
      <img :src="LoginUserImg" mode="" />
      <span>{{ LoginUserName }}</span>
    </div>
    <transition name="drawer">
      <!-- <div :style="`width:${smallPhone ? '70%' : '288px'};`" :class="[Setcontent ? 'setcontent ' : 'SetHidecss']"> -->
        <div :style="`width:${smallPhone ? '70%' : '270px'};`" v-if="Setcontent" class="setcontent">
        <!-- <div :class="[Setcontent ? 'setitem' : 'setHideitem']">联系客服</div>
        <div :class="[Setcontent ? 'setitem' : 'setHideitem']">收藏</div>
        <div :class="[Setcontent ? 'setitem' : 'setHideitem']">设置</div> -->
        <div class="setitem" @click="Out()">退出登录</div>
      </div>
    </transition>
    <div v-if="IsShowMain" @click="setShow" class="myset noStyle">☰</div>

    <div v-if="IsShowMain" @scroll="KKs" class="base" style="width: 98%; border-radius: 5px">
      <!-- 黏性布局 -->
      <!-- <div  v-show="IsBottomOver" class="TopTopOver">
                <img src="tx5.jpg" mode=""/>
                <span>Doubt_</span>
            </div> -->

      <div class="noStyle">
        <div @click="setHide" class="content noStyle">
          <div ref="mytopimg" class="mytopimg noStyle" noStyle style="position: relative">
            <img class="bgcimg" src="bgc6.jpg" mode="" />
            <div class="noStyle" style="position: absolute; z-index: 9; bottom: 0px; right: 0px;display: flex;justify-content: space-between;">
              <div >
                <!-- <div style="background-color: #272933;width: 70px;height: 26px;color: #e6e5e5;display: flex;align-items: center;
                justify-content: center;border-radius: 5px;bottom: 2px;left: 2px;position: absolute;">
                  私信
                </div> -->
              </div>
              <div class="noStyle">
                <img class="myuserImg" :src="LoginUserImg" mode="" />
                <div ref="usercontent" class="usercontent noStyle">
                  <div class="usercontentmit noStyle" >
                    <img v-if="LoginIsVip == 1" class="noStyle" style="width: 20px;height: 20px;margin-right: 2px;" src="https://file.xiaoshagua.top/font/20210412060958.png" alt="">
                    <span class="noStyle" style="font-size: 18px; margin-right: 8px; font-weight: 800">{{ LoginUserName }}</span>
                    <span class="noStyle">有始必有终！</span>
                  </div>
                  <div class="usercontentbottom noStyle">
                    <div class="usercontentbottom_Age noStyle" style="background-color: #272933;color: #e6e5e5;padding: 0 7px;
                    display: flex;align-items: center;"
                    @click="NewChat">
                    <svg style="width: 14px;height: 14px;" t="1688917500987" class="icon noStyle" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5006" width="200" height="200"><path d="M504.75 797a480.72 480.72 0 0 1-72.45-5.47 32 32 0 1 1 9.7-63.27 415.2 415.2 0 0 0 62.75 4.74c180.86 0 328-115.74 328-258s-147.14-258-328-258-328 115.74-328 258c0 72.37 39.25 142 107.69 190.9a32 32 0 1 1-37.23 52.1c-85.45-61.12-134.46-149.67-134.46-243 0-44.39 10.75-87.37 32-127.76 20.18-38.43 48.91-72.82 85.41-102.22 73.66-59.34 171.19-92 274.63-92s201 32.68 274.63 92c36.5 29.4 65.23 63.79 85.41 102.22 21.21 40.39 32 83.37 32 127.76s-10.75 87.37-32 127.76c-20.18 38.43-48.91 72.82-85.41 102.22C705.72 764.32 608.19 797 504.75 797z" fill="#e6e5e5" p-id="5007"></path><path d="M298.37 911.13a32 32 0 0 1-31.52-26.53l-32.23-185.79a32 32 0 1 1 63.06-10.94l22.47 129.54L413 735.86a32 32 0 1 1 42.24 48.08L319.5 903.17a32 32 0 0 1-21.13 7.96z" fill="#e6e5e5" p-id="5008"></path><path d="M327.5 473.5m-29.5 0a29.5 29.5 0 1 0 59 0 29.5 29.5 0 1 0-59 0Z" fill="#e6e5e5" p-id="5009"></path><path d="M327.5 535a61.5 61.5 0 1 1 61.5-61.5 61.57 61.57 0 0 1-61.5 61.5z m0-64a2.5 2.5 0 1 0 2.5 2.5 2.5 2.5 0 0 0-2.5-2.5z" fill="#e6e5e5" p-id="5010"></path><path d="M504.75 473.5m-29.5 0a29.5 29.5 0 1 0 59 0 29.5 29.5 0 1 0-59 0Z" fill="#e6e5e5" p-id="5011"></path><path d="M504.75 535a61.5 61.5 0 1 1 61.5-61.5 61.57 61.57 0 0 1-61.5 61.5z m0-64a2.5 2.5 0 1 0 2.5 2.5 2.5 2.5 0 0 0-2.5-2.5z" fill="#e6e5e5" p-id="5012"></path><path d="M681.5 473.5m-29.5 0a29.5 29.5 0 1 0 59 0 29.5 29.5 0 1 0-59 0Z" fill="#e6e5e5" p-id="5013"></path><path d="M681.5 535a61.5 61.5 0 1 1 61.5-61.5 61.57 61.57 0 0 1-61.5 61.5z m0-64a2.5 2.5 0 1 0 2.5 2.5 2.5 2.5 0 0 0-2.5-2.5z" fill="#e6e5e5" p-id="5014"></path></svg>
                    <span class="noStyle">私信</span>
                  </div> 
                    <div class="usercontentbottom_Age noStyle">
                      {{ LoginUserProvice == "" ? "未知" : LoginUserProvice }}
                    </div>
                    <div class="usercontentbottom_numId noStyle">
                      恋颖号: {{ ThisLoginuuId.substring(0, 6) }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="mybottom">
            <!-- <img class="myuserImg" :src="LoginUserImg" mode="" />
          <div ref="usercontent" class="usercontent">
            <div class="usercontentmit">
              <span style="font-size: 18px; margin-right: 8px; font-weight: 800"
                >{{LoginUserName}}</span
              >
              <span>有始必有终！</span>
            </div>
            <div class="usercontentbottom">
              <div class="usercontentbottom_Age">➹双鱼座</div>
              <div class="usercontentbottom_Age">{{LoginUserProvice == ''?'未知':LoginUserProvice}}</div>
              <div class="usercontentbottom_numId">恋颖号: {{ ThisLoginuuId.substring(0,6) }}</div>
            </div>
          </div> -->

            <div class="fenlei"></div>
            <div class="lineset">{{ LoginUserName == ThisLocalMyLoginName ? '我' : LoginUserName }}的动态</div>

            <!-- 我的说说 -->
            <div class="shuoshuoAll">
              <!-- 说说区域 -->

              <div class="journalbox" @click.capture="Global"
                style="padding: 8px;height: calc(100%);width: 100%;overflow: auto;overflow-x: hidden;padding-top:8px;position: relative;">

                <div class="sigitembox" :id="item.contentid" :data-contentid="item.contentid"
                  v-for="(item, index) in JournalData" :key="index" style="width: 100%;margin-bottom: 40px;"
                  @mouseenter="IsMoveThisIndex = index" @mouseleave="IsMoveThisIndex = -1">
                  <div style="display: flex;width: 100%;">
                     
                    <img @click.stop="GotoUser(item)" :src="item.userimgurl" alt=""
                      style="width: 40px;height: 40px;border-radius: 5px;">
                    <div style="width: calc(100% - 40px);padding-left: 10px;padding-right: 10px;box-sizing: border-box;">

                      <div style="display: flex;justify-content: space-between;height: 40px;margin-bottom: 8px;">
                        <div style="display: flex;flex-direction: column;justify-content: space-between;">
                          <div style="display: flex;">
                            <span style="color: black;font-size: 16px;margin: 0;font-weight: 700;">{{ item.username
                            }}</span>
                            <img v-if="item.isvip == 1" class="noStyle vipbox" style="width: 17px;height: 17px;margin: 0 2px;" src="https://file.xiaoshagua.top/font/20210412060958.png" alt="">
                            <span style="margin-right: 4px;
                                                        font-family: KaiTi;
                                                        color: #fbf2f1;
                                                        font-size: 12px;
                                                        padding: 1px 3px;
                                                        margin-left: 3px;
                                                        border-radius: 4px;
                                                        display: flex;
                                                        align-items: center;
                                                        justify-content: center;
                                                        background-color:#ecb1ac;
                                                      " v-show="item.top == 99">原创</span>
                          </div>

                          <div style="font-size: 12px;color: #8d8b8b;">{{ formatTime(item.time) }}</div>
                        </div>

                        <div>
                          <div v-show="ThisLocalMyLoginuuId == item.useruuid && IsMoveThisIndex == index" class="edit"
                            style="background-color: #eb7651;position: relative;width: 150px;">


                            <div style="background-color: #e6e5e5; padding: 0px 5px;border-radius: 5px;width: 16px;;height: 15px;display: flex;align-items: center;
                            justify-content: center;position: absolute;right: 0;" @click="MoreSeting = true">
                              <svg :style="`width: 16px;height: 15px;fill: ${IsdarkMode?`${SelectMycolor}`:'#000000'}`" t="1688434710308" class="icon"
                                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6523"
                                width="32" height="32">
                                <path
                                  d="M186.181818 418.909091a93.090909 93.090909 0 1 1 0 186.181818 93.090909 93.090909 0 0 1 0-186.181818z m325.818182 0a93.090909 93.090909 0 1 1 0 186.181818 93.090909 93.090909 0 0 1 0-186.181818z m325.818182 0a93.090909 93.090909 0 1 1 0 186.181818 93.090909 93.090909 0 0 1 0-186.181818z"
                                  p-id="6524"></path>
                              </svg>

                            </div>

                            <div class="noStyle" v-show="MoreSeting" @mouseleave="MoreSeting = false">
                              <div class="noStyle" style="position: absolute;background-color: #333333;width: 15px;height: 15px;right: 6px;transform: rotate(45deg);
                            top:23px;z-index: 1;"></div>
                              <div class="noStyle" style="position: absolute;right: 0;width: 90px;height: 22px;background-color: #333333;top: 25px;z-index: 2;;display: flex;align-items: center;
                          justify-content: center;color: #fcfcfc;border-radius: 5px;padding: 2px 1px;">
                                <div class="noStyle" style="height: 100%;display: flex;align-items: center;"
                                  @click="EditBook(item, index)">
                                  <svg style="width: 14px;height: 14px;fill: #fcfcfc; !important" t="1687863077069"
                                    class="icon noStyle" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                    p-id="29873" width="32" height="32">
                                    <path
                                      d="M946.176 896a34.304 34.304 0 0 1 0 68.608H77.824a34.304 34.304 0 0 1 0-68.608h868.352z m0-622.08L401.92 818.176 189.44 839.68l21.504-211.968 473.088-473.088 71.168-71.168c31.744-31.744 87.552-31.744 119.296 0l71.168 71.168c15.872 15.872 24.576 37.376 24.576 59.904 0.512 22.016-8.192 43.52-24.064 59.392zM266.24 762.88l103.936-10.752 431.616-431.616-93.696-93.696L276.48 658.432 266.24 762.88zM815.104 127.488c-4.096 0-8.192 1.536-11.264 4.608l-46.592 46.592 93.696 93.696 46.592-46.592c6.144-6.144 6.144-16.384 0-22.528l-71.168-71.168c-3.072-3.072-7.168-4.608-11.264-4.608z"
                                      p-id="29874"></path>
                                  </svg>
                                  <span class="noStyle" style="font-size: 12px;font-family: Kaiti;">编辑</span>
                                </div>
                                <div class="noStyle" style="margin-left: 6px;height: 100%;display: flex;align-items: center;" @click="DeleteJournal(item)">

                                  <svg style="width: 14px;height: 14px;fill: #fcfcfc; !important" t="1688436574917"
                                    class="icon noStyle" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                    p-id="10570" width="32" height="32">
                                    <path
                                      d="M607.897867 768.043004c-17.717453 0-31.994625-14.277171-31.994625-31.994625L575.903242 383.935495c0-17.717453 14.277171-31.994625 31.994625-31.994625s31.994625 14.277171 31.994625 31.994625l0 351.94087C639.892491 753.593818 625.61532 768.043004 607.897867 768.043004z"
                                      fill="#ffffff" p-id="10571"></path>
                                    <path
                                      d="M415.930119 768.043004c-17.717453 0-31.994625-14.277171-31.994625-31.994625L383.935495 383.935495c0-17.717453 14.277171-31.994625 31.994625-31.994625 17.717453 0 31.994625 14.277171 31.994625 31.994625l0 351.94087C447.924744 753.593818 433.647573 768.043004 415.930119 768.043004z"
                                      fill="#ffffff" p-id="10572"></path>
                                    <path
                                      d="M928.016126 223.962372l-159.973123 0L768.043004 159.973123c0-52.980346-42.659499-95.983874-95.295817-95.983874L351.94087 63.989249c-52.980346 0-95.983874 43.003528-95.983874 95.983874l0 63.989249-159.973123 0c-17.717453 0-31.994625 14.277171-31.994625 31.994625s14.277171 31.994625 31.994625 31.994625l832.032253 0c17.717453 0 31.994625-14.277171 31.994625-31.994625S945.73358 223.962372 928.016126 223.962372zM319.946246 159.973123c0-17.545439 14.449185-31.994625 31.994625-31.994625l320.806316 0c17.545439 0 31.306568 14.105157 31.306568 31.994625l0 63.989249L319.946246 223.962372 319.946246 159.973123 319.946246 159.973123z"
                                      fill="#ffffff" p-id="10573"></path>
                                    <path
                                      d="M736.048379 960.010751 288.123635 960.010751c-52.980346 0-95.983874-43.003528-95.983874-95.983874L192.139761 383.591466c0-17.717453 14.277171-31.994625 31.994625-31.994625s31.994625 14.277171 31.994625 31.994625l0 480.435411c0 17.717453 14.449185 31.994625 31.994625 31.994625l448.096758 0c17.717453 0 31.994625-14.277171 31.994625-31.994625L768.215018 384.795565c0-17.717453 14.277171-31.994625 31.994625-31.994625s31.994625 14.277171 31.994625 31.994625l0 479.231312C832.032253 916.835209 789.028725 960.010751 736.048379 960.010751z"
                                      fill="#ffffff" p-id="10574"></path>
                                  </svg>
                                  <span class="noStyle" style="font-size: 12px;font-family: Kaiti;">删除</span>
                                </div>
                              </div>
                            </div>


                          </div>
                        </div>
                      </div>

                      <div>
                        <VueMarkdown class="markdown-body" :source="item.content"></VueMarkdown>
                      </div>

                      <div style="display: flex;align-items: center;margin-top: 10px;">
                        <svg style="width: 15px;height: 15px;" t="1687884619436" class="icon" viewBox="0 0 1024 1024"
                          version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9429" width="32" height="32">
                          <path
                            d="M512 416a96 96 0 1 1-96 96 96 96 0 0 1 96-96m0-64a160 160 0 1 0 160 160 160 160 0 0 0-160-160z"
                            fill="#8d8b8b" p-id="9430"></path>
                          <path
                            d="M512 298.88c188.64 0 288 113.92 366.72 213.12C800 611.36 700.64 725.12 512 725.12S224 611.36 145.28 512C224 412.64 323.36 298.88 512 298.88m0-64C264.64 234.88 147.52 406.56 64 512c83.52 105.44 200.64 277.12 448 277.12S876.48 617.44 960 512c-83.52-105.44-200.64-277.12-448-277.12z"
                            fill="#8d8b8b" p-id="9431"></path>
                        </svg>
                        <span style="font-size: 12px;color: #8d8b8b;margin-left: 3px;">浏览{{ item.browsecount }}次</span>
                      </div>
                      <!-- <div style="display: flex;justify-content: space-between;margin-top: 5px;">
                            <span style="font-size: 13px;color: #576b95;">发布于{{ item.provice }}</span>
                        </div> -->
                      <div style="display: flex;justify-content: space-between;margin-bottom: 6px;">
                        <div style="font-size: 13px;color: #8d8b8b;margin: 5px 0;">发布于{{ item.provice }}</div>

                        <div style="display: flex;flex-direction: column;">
                          <div style="display: flex;align-items: center;">
                            <div style="display: flex;align-items: center;margin-right: 10px;" class="commentbox"
                              @click="GetComment(item.contentid, 0, 5, -1)">

                              <svg style="width: 16px;height: 16px;" t="1687888312660" class="icon"
                                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10822"
                                width="32" height="32">
                                <path
                                  d="M184.32 891.667692c-12.603077 0-25.206154-2.363077-37.809231-7.876923-37.021538-14.966154-59.864615-49.624615-59.864615-89.009231v-275.692307c0-212.676923 173.292308-385.969231 385.969231-385.969231h78.76923c212.676923 0 385.969231 173.292308 385.969231 385.969231 0 169.353846-137.846154 307.2-307.2 307.2H289.083077l-37.021539 37.021538c-18.904615 18.116923-43.323077 28.356923-67.741538 28.356923zM472.615385 195.347692c-178.018462 0-322.953846 144.935385-322.953847 322.953846v275.692308c0 21.267692 15.753846 29.144615 20.48 31.507692 4.726154 2.363077 22.055385 7.876923 37.021539-7.08923l46.473846-46.473846c6.301538-6.301538 14.178462-9.452308 22.055385-9.452308h354.461538c134.695385 0 244.184615-109.489231 244.184616-244.184616 0-178.018462-144.935385-322.953846-322.953847-322.953846H472.615385z"
                                  fill="#7F7F7F" p-id="10823"></path>
                                <path
                                  d="M321.378462 512m-59.076924 0a59.076923 59.076923 0 1 0 118.153847 0 59.076923 59.076923 0 1 0-118.153847 0Z"
                                  fill="#BFBFBF" p-id="10824"></path>
                                <path
                                  d="M518.301538 512m-59.076923 0a59.076923 59.076923 0 1 0 118.153847 0 59.076923 59.076923 0 1 0-118.153847 0Z"
                                  fill="#BFBFBF" p-id="10825"></path>
                                <path
                                  d="M715.224615 512m-59.076923 0a59.076923 59.076923 0 1 0 118.153846 0 59.076923 59.076923 0 1 0-118.153846 0Z"
                                  fill="#BFBFBF" p-id="10826"></path>
                              </svg>

                              <span style="margin-left: 3px;font-size: 13px;">{{ item.commentcount }}</span>
                            </div>
                            <div class="ilke" style="display: flex;align-items: center;" @click="ILike(item, index)">
                              <svg style="width: 16px;height: 16px;fill: #8d8b8b !important;" t="1687860314249"
                                class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                p-id="2315" width="32" height="32">
                                <path
                                  d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z"
                                  p-id="2316"></path>
                              </svg>
                              <span style="margin-left: 3px;font-size: 13px;">{{ item.like }}</span>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div v-show="IsShowMasterComment && IsMovClickThisIndex == item.contentid"
                        style="display: flex;position: relative;">
                        <input placeholder="留下你的精彩评论吧!" @click="MasterInput" v-model="ThisCommentMsg" type="text"
                          style="outline: none;border: 1px solid #a8a6a6;border-radius: 4px;margin: 0;padding: 4px;margin: 4px 0;width: 100%;height: 14px;font-size: 13px;font-family: Kaiti;">
                        <div style="position: absolute;right: 6px;top: 7px;width: 18px;height: 18px;" class="sendcommit">
                          <svg @click="ReplyMsg(item, 1, null, null)"
                          :style="`width: 18px;height: 18px;fill: ${IsdarkMode?`${SelectMycolor} !important`:'#25292c !important'}`"  t="1687921276844" class="icon"
                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="40922"
                            width="32" height="32">
                            <path
                              d="M512 64.383234C264.7878 64.383234 64.383234 264.7878 64.383234 512s200.404567 447.616766 447.616766 447.616766 447.616766-200.404567 447.616766-447.616766S759.2122 64.383234 512 64.383234zM649.153661 476.550387c-14.514842 12.958403-36.414339 11.264-48.914906-3.784303l-50.402874-60.683752 0 287.768527c0 19.858651-15.528623 35.958547-34.684168 35.958547s-34.684168-16.098874-34.684168-35.958547L480.467545 409.174866l-57.516711 64.531417c-13.000303 14.585357-34.942723 15.483657-49.011992 2.005078-14.068248-13.477557-14.933844-36.227321-1.934563-50.812679l106.756599-119.777341c20.609788-23.122778 55.10285-22.477924 74.964567 1.433804l99.077621 119.283737C665.302611 440.886164 663.668503 463.590962 649.153661 476.550387z"
                              p-id="40923"></path>
                          </svg>
                        </div>
                      </div>

                      <!-- 评论 -->
                      <div v-for="(parentitem, parentindex) in Comments.filter(r => r.level == 1)" :key="parentindex"
                        style="width: 100%;" v-show="IsShowCommentBox && IsMovClickThisIndex == item.contentid && IsMasterMerge == false"
                        @click="IsShowCommentBox = true" :id="parentitem.commentid" :ref="parentitem.commentid">

                        <div style="display: flex;width: 100%;padding: 5px 0">
                          <img @click.stop="GotoUser(parentitem)" :src="parentitem.userimgurl" alt=""
                            style="width: 30px;height: 30px;border-radius: 5px;">
                          <div style="display: flex;flex-direction: column;margin-left: 5px;font-size: 14px;width: 100%;">
                            <div style="margin-bottom: 3px;color: #2b2828;font-family: KaiTi;margin-bottom: 3px;">{{
                              parentitem.username }}</div>
                            <div style="margin-bottom: 3px;font-size: 15px;margin-bottom: 6px;">{{
                              parentitem.comment }}</div>
                            <div style="display: flex;margin-bottom: 3px;">
                              <span style="font-size: 12px;font-family: Kaiti;color: #8d8b8b;">{{
                                formatTime(parentitem.time) }}</span>
                              <span style="font-size: 12px;font-family: Kaiti;color: #8d8b8b;">·{{
                                parentitem.provice }}</span>
                            </div>
                            <div style="display: flex;align-items: center;margin-top: 3px;" class="commentbox">
                              <div @click="ThisCommentIndex = parentitem.commentid" style="display: flex;align-items: center;">
                                <svg style="width: 12px;height: 12px;fill: #8d8b8b !important;" t="1687914841171"
                                  class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                  p-id="36245" width="32" height="32">
                                  <path
                                    d="M535.04 896c-61.44 0-373.76-17.92-412.16-20.48-17.92 0-30.72-12.8-35.84-28.16-5.12-15.36 0-33.28 12.8-43.52 2.56-2.56 10.24-7.68 15.36-12.8C176.64 747.52 197.12 727.04 204.8 716.8c-40.96-64-64-138.24-64-215.04 0-112.64 48.64-220.16 130.56-294.4 84.48-74.24 194.56-110.08 307.2-97.28 181.76 20.48 327.68 166.4 348.16 348.16 12.8 112.64-23.04 225.28-97.28 307.2-74.24 81.92-181.76 130.56-294.4 130.56zM225.28 803.84c110.08 5.12 268.8 15.36 309.76 15.36 89.6 0 176.64-38.4 238.08-104.96 61.44-69.12 89.6-156.16 79.36-248.32-17.92-145.92-135.68-263.68-281.6-281.6-92.16-10.24-179.2 17.92-248.32 79.36-66.56 61.44-104.96 145.92-104.96 238.08 0 64 17.92 125.44 53.76 179.2 30.72 40.96-2.56 87.04-46.08 122.88zM128 798.72z"
                                    p-id="36246"></path>
                                </svg>
                                <span style="margin-left: 0px;font-size: 12px;color: #8d8b8b;">回复</span>
                              </div>

                              <div class="ilke" style="display: flex;align-items: center;margin-left: 12px;"
                                @click="CommentthisILike(item, 0, parentitem, null)">
                                <svg style="width: 12px;height: 12px;fill: #8d8b8b !important;" t="1687860314249"
                                  class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                  p-id="2315" width="32" height="32">
                                  <path
                                    d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z"
                                    p-id="2316"></path>
                                </svg>
                                <span style="margin-left: 3px;font-size: 12px;color: #8d8b8b;">{{
                                  parentitem.commentlike }}</span>
                              </div>


                            </div>
                            <div v-show="ThisCommentIndex == parentitem.commentid"
                              style="display: flex;position: relative;">
                              <input placeholder="留下你的精彩评论吧!" v-model="ThisCommentMsg" type="text"
                                style="outline: none;border-radius: 4px;font-family: Kaiti;border: 1px solid #a8a6a6;margin: 0;padding: 4px;margin: 4px 0;width: 100%;height: 14px;font-size: 13px;">
                              <div @click="ReplyMsg(item, 2, parentitem, null)"
                                style="position: absolute;right: 6px;top: 7px;width: 18px;height: 18px;" class="sendcommit">
                                <svg  :style="`width: 18px;height: 18px;fill: ${IsdarkMode?`${SelectMycolor} !important`:'#25292c !important'}`"   t="1687921276844"
                                  class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                  p-id="40922" width="32" height="32">
                                  <path
                                    d="M512 64.383234C264.7878 64.383234 64.383234 264.7878 64.383234 512s200.404567 447.616766 447.616766 447.616766 447.616766-200.404567 447.616766-447.616766S759.2122 64.383234 512 64.383234zM649.153661 476.550387c-14.514842 12.958403-36.414339 11.264-48.914906-3.784303l-50.402874-60.683752 0 287.768527c0 19.858651-15.528623 35.958547-34.684168 35.958547s-34.684168-16.098874-34.684168-35.958547L480.467545 409.174866l-57.516711 64.531417c-13.000303 14.585357-34.942723 15.483657-49.011992 2.005078-14.068248-13.477557-14.933844-36.227321-1.934563-50.812679l106.756599-119.777341c20.609788-23.122778 55.10285-22.477924 74.964567 1.433804l99.077621 119.283737C665.302611 440.886164 663.668503 463.590962 649.153661 476.550387z"
                                    p-id="40923"></path>
                                </svg>
                              </div>
                            </div>




                            <!-- 子级 -->
                            <div @click="GetSlavecomment(item.contentid, parentitem.commentid, 0, 5, -1, -1)"
                              v-show="parentitem.slavecommentcount != 0 && SlaveComments.filter(r => FirstParentComment_Start(r.parentid) == parentitem.commentid) == 0 || parentitem.slavecommentcount != 0 && IsSlaveMerge"
                              class="slavecomment" style="margin-left: 0px;font-size: 12px;color: #8d8b8b;display: flex;align-items: center;
                                    padding: 5px 0;">
                              <span style="">— 展开 {{ parentitem.slavecommentcount }} 条回复 </span>
                              <svg style="width: 21px;height: 21px;fill: #25292c !important;" t="1687961489059"
                                class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                p-id="12016" width="200" height="200">
                                <path
                                  d="M341.333333 426.666667a32 32 0 0 1 45.226667 0l126.72 126.72L640 426.666667a32 32 0 0 1 45.226667 45.226666l-149.333334 149.333334a32 32 0 0 1-45.226666 0L341.333333 471.893333A32 32 0 0 1 341.333333 426.666667z"
                                  fill="#666666" p-id="12017"></path>
                              </svg>
                            </div>

                            <div style="border-radius: 4px;overflow: hidden;font-family: Kaiti;"  v-show="IsSlaveMerge == false">
                              <div
                                v-for="(item2, index) in SlaveComments.filter(r => FirstParentComment_Start(r.parentid) == parentitem.commentid)"
                                :key="index" style="display: flex; background-color: #e4e3e3;width: 100%;padding: 8px;width: 100%;border-radius: 5px;margin: 0;
                                            margin-top: 4px;box-sizing: border-box;" :id="item2.commentid"
                                :ref="item2.commentid">
                                <img @click.stop="GotoUser(item2)" :src="item2.userimgurl" alt=""
                                  style="width: 30px;height: 30px;border-radius: 5px;">
                                <div
                                  style="display: flex;flex-direction: column;margin-left: 5px;font-size: 14px;width: 100%;">

                                  <div
                                                    style="display: flex;align-items: center;color: #2b2828;font-family: KaiTi;margin-bottom: 3px;height: 20px;">
                                                    <div style="margin-bottom: 3px;height: 100%;display: flex;align-items: center;">{{ item2.username }}</div>
                                                    <div v-show="RelationUser(FirstParentComment(item2.parentid)) != ''"
                                                        style="display: flex;align-items: center;margin-bottom: 3px;height: 100%;">
                                                        <span style="margin: 0 4px;font-size: 12px;display: flex;height: 100%;line-height: 100%;align-items: center;"> 
                                                          <svg style="width: 15px;height: 15px;" t="1689093098132" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4897" width="16" height="16"><path d="M701.44 512L322.56 796.587V227.413L701.44 512z" fill="#333333" p-id="4898"></path></svg>
                                                        

                                                        </span>
                                                        <span style="display: flex;height: 100%;;align-items: center;">{{RelationUser(FirstParentComment(item2.parentid)) }}</span>
                                                    </div>
                                                </div>

                                  <div style="margin-bottom: 6px;font-size: 15px;">{{ item2.comment }}</div>
                                  <div style="display: flex;margin-bottom: 3px;color: #8d8b8b;">
                                    <span style="font-size: 12px;font-family: Kaiti;">{{ item2.provice
                                    }}</span>
                                    <span style="font-size: 12px;font-family: Kaiti;">·{{
                                      formatTime(item2.time) }}</span>
                                  </div>
                                  <div style="display: flex;align-items: center;margin-top: 3px;" class="commentbox">
                                    <div @click="ThisCommentIndex = item2.commentid" style="display: flex;align-items: center;">
                                      <svg style="width: 12px;height: 12px;fill: #8d8b8b !important;" t="1687914841171"
                                        class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="36245" width="32" height="32">
                                        <path
                                          d="M535.04 896c-61.44 0-373.76-17.92-412.16-20.48-17.92 0-30.72-12.8-35.84-28.16-5.12-15.36 0-33.28 12.8-43.52 2.56-2.56 10.24-7.68 15.36-12.8C176.64 747.52 197.12 727.04 204.8 716.8c-40.96-64-64-138.24-64-215.04 0-112.64 48.64-220.16 130.56-294.4 84.48-74.24 194.56-110.08 307.2-97.28 181.76 20.48 327.68 166.4 348.16 348.16 12.8 112.64-23.04 225.28-97.28 307.2-74.24 81.92-181.76 130.56-294.4 130.56zM225.28 803.84c110.08 5.12 268.8 15.36 309.76 15.36 89.6 0 176.64-38.4 238.08-104.96 61.44-69.12 89.6-156.16 79.36-248.32-17.92-145.92-135.68-263.68-281.6-281.6-92.16-10.24-179.2 17.92-248.32 79.36-66.56 61.44-104.96 145.92-104.96 238.08 0 64 17.92 125.44 53.76 179.2 30.72 40.96-2.56 87.04-46.08 122.88zM128 798.72z"
                                          p-id="36246"></path>
                                      </svg>
                                      <span style="margin-left: 0px;font-size: 12px;color: #8d8b8b;">回复</span>
                                    </div>

                                    <div class="ilke" style="display: flex;align-items: center;margin-left: 12px;"
                                      @click="CommentthisILike(item, 1, parentitem, item2)">
                                      <svg style="width: 12px;height: 12px;fill: #8d8b8b !important;" t="1687860314249"
                                        class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="2315" width="32" height="32">
                                        <path
                                          d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z"
                                          p-id="2316"></path>
                                      </svg>
                                      <span style="margin-left: 3px;font-size: 12px;color: #8d8b8b;">{{
                                        item2.commentlike }}</span>
                                    </div>
                                  </div>
                                  <div v-show="ThisCommentIndex == item2.commentid"
                                    style="display: flex;position: relative;">
                                    <input placeholder="留下你的精彩评论吧!" v-model="ThisCommentMsg" type="text"
                                      style="outline: none;border-radius: 4px;font-family: Kaiti;border: 1px solid #a8a6a6;margin: 0;padding: 4px;margin: 4px 0;width: 100%;height: 14px;font-size: 13px;">

                                    <div @click="ReplyMsg(item, 2, parentitem, item2)"
                                      style="position: absolute;right: 6px;top: 7px;width: 18px;height: 18px;" class="sendcommit">
                                      <svg :style="`width: 18px;height: 18px;fill: ${IsdarkMode?`${SelectMycolor} !important`:'#25292c !important'}`"  t="1687921276844"
                                        class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="40922" width="32" height="32">
                                        <path
                                          d="M512 64.383234C264.7878 64.383234 64.383234 264.7878 64.383234 512s200.404567 447.616766 447.616766 447.616766 447.616766-200.404567 447.616766-447.616766S759.2122 64.383234 512 64.383234zM649.153661 476.550387c-14.514842 12.958403-36.414339 11.264-48.914906-3.784303l-50.402874-60.683752 0 287.768527c0 19.858651-15.528623 35.958547-34.684168 35.958547s-34.684168-16.098874-34.684168-35.958547L480.467545 409.174866l-57.516711 64.531417c-13.000303 14.585357-34.942723 15.483657-49.011992 2.005078-14.068248-13.477557-14.933844-36.227321-1.934563-50.812679l106.756599-119.777341c20.609788-23.122778 55.10285-22.477924 74.964567 1.433804l99.077621 119.283737C665.302611 440.886164 663.668503 463.590962 649.153661 476.550387z"
                                          p-id="40923"></path>
                                      </svg>
                                    </div>
                                  </div>

                                </div>
                              </div>
                            </div>

                            <div class="loadcomment" v-show="IsSlaveMerge == false && SlaveComments.filter(r => FirstParentComment_Start(r.parentid) == parentitem.commentid).length >= 1"
                                        style="font-size: 12px;color: #8d8b8b;width: 100%;text-align: center;margin-bottom: 5px;margin-top: 5px;display: flex;">
                                        

                                        <div style="display: flex;align-items: center;margin-right: 15px;" @click="LoadMoreGetSlavecomment(item.contentid, parentitem.commentid, -1, -1)"
                                        v-show="SlaveComments.filter(r => FirstParentComment_Start(r.parentid) == parentitem.commentid).length >= 5 && IsSlaveCommentLoadOrNull">
                                            <span style="">展开更多评论 </span>
                                        <svg style="width: 21px;height: 21px;fill: #25292c !important;" t="1687961489059"
                                            class="icon" viewBox="0 0 1024 1024" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg" p-id="12016" width="200" height="200">
                                            <path
                                                d="M341.333333 426.666667a32 32 0 0 1 45.226667 0l126.72 126.72L640 426.666667a32 32 0 0 1 45.226667 45.226666l-149.333334 149.333334a32 32 0 0 1-45.226666 0L341.333333 471.893333A32 32 0 0 1 341.333333 426.666667z"
                                                fill="#666666" p-id="12017"></path>
                                        </svg>
                                        </div>

                                        <div style="display: flex;align-items: center;" @click="IsSlaveMerge = true">
                                            <span>收起</span>
                                        <svg style="width: 21px;height: 21px;fill: #25292c !important; transform: rotate(180deg);" t="1687961489059"
                                            class="icon" viewBox="0 0 1024 1024" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg" p-id="12016" width="200" height="200">
                                            <path
                                                d="M341.333333 426.666667a32 32 0 0 1 45.226667 0l126.72 126.72L640 426.666667a32 32 0 0 1 45.226667 45.226666l-149.333334 149.333334a32 32 0 0 1-45.226666 0L341.333333 471.893333A32 32 0 0 1 341.333333 426.666667z"
                                                fill="#666666" p-id="12017"></path>
                                        </svg>
                                        </div>

                                    </div>

                          </div>
                        </div>
                      </div>
                      
                      <div class="loadcomment" v-show="IsMasterMerge == false && Comments.filter(r => r.contentid == item.contentid).length >= 1"
                            style="font-size: 12px;color: #8d8b8b;width: 100%;text-align: center;margin-bottom: 5px;display: flex;">
                                
                        
                                <div style="display: flex;align-items: center;margin-right: 15px;" @click="LoadMoreMasterComment(item.contentid, -1)"
                                v-show="Comments.filter(r => r.contentid == item.contentid).length >= 5 && IsMasterCommentLoadOrNull">
                                            <span style="">展开更多评论 </span>
                                        <svg style="width: 21px;height: 21px;fill: #25292c !important;" t="1687961489059"
                                            class="icon" viewBox="0 0 1024 1024" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg" p-id="12016" width="200" height="200">
                                            <path
                                                d="M341.333333 426.666667a32 32 0 0 1 45.226667 0l126.72 126.72L640 426.666667a32 32 0 0 1 45.226667 45.226666l-149.333334 149.333334a32 32 0 0 1-45.226666 0L341.333333 471.893333A32 32 0 0 1 341.333333 426.666667z"
                                                fill="#666666" p-id="12017"></path>
                                        </svg>
                                        </div>

                                        <div style="display: flex;align-items: center;" @click="IsMasterMerge = true">
                                            <span>收起</span>
                                        <svg style="width: 21px;height: 21px;fill: #25292c !important; transform: rotate(180deg);" t="1687961489059"
                                            class="icon" viewBox="0 0 1024 1024" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg" p-id="12016" width="200" height="200">
                                            <path
                                                d="M341.333333 426.666667a32 32 0 0 1 45.226667 0l126.72 126.72L640 426.666667a32 32 0 0 1 45.226667 45.226666l-149.333334 149.333334a32 32 0 0 1-45.226666 0L341.333333 471.893333A32 32 0 0 1 341.333333 426.666667z"
                                                fill="#666666" p-id="12017"></path>
                                        </svg>
                                        </div>

                        </div>

                      <div :style="`${IsdarkMode?'border-bottom: 1px solid #454546;width: 100%;':'border-bottom: 1px solid #e6e5e5;width: 100%;'}`"></div>
                    </div>
                  </div>

                </div>

                <div style="width: 100%;text-align: center;color: gray;padding-bottom: 16px;font-size: 13px;">
                  <div class="loadMore" v-if="IsLoadOrNull" @click="LoadMore">加载更多</div>
                  <span v-else>暂无更多...</span>
                </div>
              </div>

              <!-- 说说区域 -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 编辑 -->
    <div v-else style="height: 100%;width: 100%;">
      <input type="hidden" v-model="EditIndex" />

      <div style="
            display: flex;
            justify-content: flex-end;
            align-items: center;
            height: 30px;
          ">
        <input ref="inputfile" type="file" accept="image/*" @change="handleFileChange" name="" id="fi" value=""
          style="display: none" />
        <div style="display: flex; align-items: center; padding: 5px">
          <select name="" id="" v-model="SelectEDITOR">
            <option value="0">HTML编辑器</option>
            <option value="1">Markdown编辑器</option>
          </select>
        </div>
        <div style="display: flex; align-items: center; padding: 5px">
          <input type="checkbox" name="" v-model="IsTop" id="isTop" />
          <label for="isTop">原创</label>
        </div>
        <div class="btn" style="padding: 5px; border: 0" @click="Cancel">
          取消
        </div> 
        <div class="btn" style="padding: 5px; border: 0" @click="PreviewMd">
          {{ !IsShowpreview ? "预览" : "修改" }}
        </div>

        <div v-if="IsPublishOREdit" class="btn" style="padding: 5px; border: 0" @click="Publish">
          发布
        </div>
        <div v-else class="btn" style="padding: 5px; border: 0" @click="EditPublish">
          保存
        </div>
      </div>
      <div class="editcontent" style="height:calc(100% - 36px);box-sizing: border-box;">
        <div v-show="!IsShowpreview" style="height: 100%">
          <quill-editor v-if="SelectEDITOR == 0" style="height: 100%" @paste="onPaste($event)"
            @input="handleEditorInput($event)" ref="myQuillEditor" v-model="content" :options="editorOption"
            @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)"
            @change="handleChange($event)" />
          <textarea id="edittextarea" v-else style="
                height: 100%;
                width: 100%;
                outline: none;
                resize: none;
                background-color: #f5f5f5;
                border: 0;
                border-top: 1px solid var(--journal-edittar);
                padding: 8px;
                box-sizing: border-box;
              " v-model="content" placeholder="请在这里输入"></textarea>
        </div>
        <div v-show="IsShowpreview" id="preview"   style="height: 100%;;overflow-y: auto;box-sizing: border-box;">
          <VueMarkdown class="markdown-body" :source="content"></VueMarkdown>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import VueMarkdown from "vue-markdown";
import hljs from "highlight.js";
import "highlight.js/styles/github.css";

import Quill from "quill";
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

import { ImageDrop } from "quill-image-drop-module"; // 图片拖动组件引用
import ImageResize from "quill-image-resize-module"; // 图片缩放组件引用
Quill.register("modules/imageDrop", ImageDrop); // 注册
Quill.register("modules/imageResize", ImageResize); // 注册

const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗，斜体，下划线，删除线
  ["blockquote", "code-block"], //引用，代码块
  [{ header: 1 }, { header: 2 }], // 几级标题
  [{ list: "ordered" }, { list: "bullet" }], // 有序列表，无序列表
  [{ script: "sub" }, { script: "super" }], // 下角标，上角标
  [{ indent: "-1" }, { indent: "+1" }], // 缩进
  [{ direction: "rtl" }], // 文字输入方向
  [{ size: ["small", false, "large", "huge"] }], // 字体大小
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
  [{ color: [] }, { background: [] }], // 颜色选择
  [{ font: [] }], // 字体
  [{ align: [] }], // 居中
  ["clean"], // 清除样式,
  ["link", "image", "video"], // 上传图片、上传视频
  // 自定义的工具栏选项
  //['my-custom-button'] // 加入自定义按钮
];

export default {
  components: {
    quillEditor,
    VueMarkdown,
  },
  props: [
    "smallPhone",
    "IsdarkMode",
    "SelectMycolor"
  ],
  data() {
    return {
      LoginIsVip:0,
      MoreSeting: false,//更多设置
      IsLoadOrNull: true, //是否加载帖子
      IsMasterCommentLoadOrNull: true, //是否加载评论
      IsSlaveCommentLoadOrNull: true,//是否加载评论
      IsSlaveMerge:false, //子集评论是否合并
      IsMasterMerge:false, //子集评论是否合并
      Setcontent: false, //侧边栏
      IsBottomOver: false,
      content: "",
      SelectEDITOR: 0,
      JournalData: [],
      ThisLocalMyLoginuuId: "", //本地当前登录的uuid
      ThisLocalMyLoginName: "",//本地当前登录的名称
      ThisLoginuuId: "",
      LoginUserName: "", //用户昵称
      LoginUserImg: "", //用户头像base64
      LoginUserProvice: "", //用户所在省份
      IsShowpreview: false,
      IsShowMain: true,
      IsTop: false,
      IsShowMasterComment: false, //是否显示主评论 输入框
      IsShowCommentBox: false, //是否显示评论
      ThisCommentIndex: "",
      ThisCommentMsg: "", //评论
      Comments: [], //评论
      SlaveComments: [], //子评论
      visibleElements: [],
      IsMovClickThisIndex: "", //点击当前评论
      IsMoveThisIndex: 0, //移动当前
      IsPublishOREdit: true, //发布还是编辑
      EditIndex: 0, //编辑当前索引
      // 富文本编辑器配置
      editorOption: {
        placeholder: "请在这里输入",
        theme: "snow", //主题 snow：有工具栏的；bubble：只有文本域的
        history: {
          delay: 1000,
          maxStack: 50,
          userOnly: false,
        },
        modules: {
          imageDrop: true, //图片拖拽
          imageResize: {
            //放大缩小
            displayStyles: {
              backgroundColor: "black",
              border: "none",
              color: "white",
            },
            modules: ["Resize", "DisplaySize", "Toolbar"],
          },
          clipboard: {
              matchVisual: false, //解决 quill（vue-quill-editor） 编辑器中莫名多出一行“<p><br></p>”的过程
              // 粘贴板，处理粘贴时候的自带样式
              matchers: [[Node.ELEMENT_NODE, this.handleCustomMatcher]],
          },
          toolbar: {
            container: toolbarOptions, //工具栏
            handlers: {
              "my-custom-button": () => { },
              image: (value) => {
                this.SetImg();
              },
            },
          },
        },
      },
    };
  },
  created() {
    this.ThisLocalMyLoginuuId = localStorage.getItem("cacheLoginuuid");
    this.ThisLocalMyLoginName = localStorage.getItem("cacheLoginUserName");

 
    //     let loginUserImg = localStorage.getItem("cacheLoginUserImg");
    //     if (loginUserImg != null && loginUserImg != "") {
    //     this.LoginUserImg = loginUserImg;
    //     }

    window.addEventListener("onmessageWS", this.getsocketData); //监听webscoket消息
  },
  async mounted() {

  },
  updated() { 

     

  },
  computed:
  {
    RelationUser: function () {
      return function (parent) {

        let comments = this.SlaveComments.filter(r => r.commentid == parent)

        if (comments.length == 0) {
          return ''
        }

        return comments[0].username
      };
    }
  },
  methods: {
    Out() //登出操作
    {
      localStorage.removeItem('cacheLoginUserName')
			localStorage.removeItem("cacheLoginUserImg")
			localStorage.removeItem("cacheLoginuuid")
      localStorage.removeItem('cacheUserPassWord')

      localStorage.removeItem('cacheIsVip')

      location.reload()
    },
    handleCustomMatcher(node, delta) {
        delta.ops = delta.ops.map(op => {
            return {
            insert: op.insert
            }
        })
        return delta
        },
    NewChat()
        { 
          let userdetail =
          {
            useruuid:this.ThisLoginuuId ,
            userimgurl:this.LoginUserImg,
            username:this.LoginUserName,
            provice:this.LoginUserProvice
          }
         // console.log('userdetail',userdetail);
            this.$emit('child-NewChat', userdetail);
        }, 
    GotoUser(item) { //进入个人主页
            this.$emit("journal-GotoUser", item); 
        },
    async  DeleteJournal(item)
        {
            let useruuid = localStorage.getItem("cacheLoginuuid")
            return await new Promise((resolve, reject) => {
                axios.get(this.$BaseUrl + `/api/ChatGPT/DeleteJournal?contentid=${item.contentid}&useruuid=${useruuid}`).then(res => {
 
                    if(res.data.data)
                    {
                        this.Tips("删除成功")

                        let index = this.JournalData.findIndex(obj => obj.contentid === item.contentid);

                        if (index !== -1) {
                          // 删除索引为 index 的元素
                          this.JournalData.splice(index, 1);
                        }
                    }
                    resolve(res.data.data)

                }).catch(error => {
                    reject(error)
                    console.log(error);
                });
            })
        },
    async getsocketData(e) {
      var objmsg = JSON.parse(e.detail.data);
      if (objmsg.msgType == 99) {
        // objmsg.Data.forEach((r) => {
        //   r.useruame =
        //     r.useruuid == localStorage.getItem("cacheLoginuuid")
        //       ? "我"
        //       : r.useruame;
        // });

        let thisuser = objmsg.Data.filter(
          (r) => r.useruuid == this.ThisLoginuuId
        );

        if (thisuser.length > 0) {
          this.LoginUserProvice = thisuser[0].provice;
        }
      }
    },

    async OnLoadGetData(item) {
      console.log("item", item);
      this.ThisLoginuuId = item.useruuid;
      this.LoginUserImg = item.userimgurl;
      this.LoginUserName = item.username;
      this.LoginUserProvice = item.provice;
      //alert(ThisLoginuuId)
      await new Promise((a, b) => {
        axios
          .get(this.$BaseUrl + "/api/ChatGPT/Get?useruuid=" + item.useruuid)
          .then(async (res) => {
            this.JournalData = res.data.data;

            await this.GetVip()

            this.Codeformat();
            a(res.data.data);
          })
          .catch((error) => {
            console.log(error);
          });
      });
    },

    async GetVip() {
      await new Promise((a, b) => {
        axios
          .get(this.$BaseUrl + "/api/ChatGPT/GetVip?username=" + this.LoginUserName)
          .then((res) => {
            this.LoginIsVip = res.data.data 
          })
          .catch((error) => {
            console.log(error);
          });
      });
    },

    async GetData(useruuid) {
      await new Promise((a, b) => {
        axios
          .get(this.$BaseUrl + "/api/ChatGPT/Get?useruuid=" + useruuid)
          .then(async (res) => {
            this.JournalData = res.data.data;

 
            this.Codeformat();
            a(res.data.data);
          })
          .catch((error) => {
            console.log(error);
          });
      });
    },
    async LoadMore() //加载更多
    {



      let pageindex = this.JournalData.length
      let pagesize = 5 + pageindex;

      await new Promise((a, b) => {
        axios.get(this.$BaseUrl + `/api/ChatGPT/Get?useruuid=${this.ThisLoginuuId}&pageindex=${pageindex}`).then(res => {


          console.log('res.data.data', res.data.data);

          if (res.data.data.length != 0) {
            this.IsLoadOrNull = true
          }
          else {
            this.IsLoadOrNull = false
          }

          res.data.data.forEach(r => {
            this.JournalData.push(r)
          })


          this.scrollIsMove()

          this.Codeformat();
          a(res.data.data)
        }).catch(error => {

          console.log(error);
        });
      })
    },
    FirstParentComment(parentid) {
      let thisparentid = ''
      let arr = parentid.split(',')
      if (arr.length > 1) {
        thisparentid = arr[1]
      }
      else {
        thisparentid = arr[0]
      }
      return thisparentid
    },
    FirstParentComment_Start(parentid) {
      let arr = parentid.split(',')
      return arr[0]
    },
    MasterInput() {
      //首个文本框点击事件
      this.IsShowMasterComment = true;
      this.IsShowCommentBox = true;
    },

    async GetComment(contentid, pageindex, pagesize, listindex) //获取评论
    {
      this.IsMasterMerge = false


      this.IsMovClickThisIndex = contentid
      this.IsShowMasterComment = true
      this.IsShowCommentBox = true

      this.ThisCommentIndex = -999 //避免首个文本框  和子评论文本框同时显示

      this.Comments = []
      let data = await this.GetComment_DBData(contentid, pageindex, pagesize, listindex)



      if (data.length < 6) {
        this.IsMasterCommentLoadOrNull = false
      }
      else {
        this.IsMasterCommentLoadOrNull = true
      }

      data.forEach(r => {
        if (!this.Comments.some(a => a.commentid == r.commentid)) {
          this.Comments.push(r)
        }
        else {
          console.log('重复对象', r);
        }

      })
    },
    async GetComment_DBData(contentid, pageindex, pagesize, listindex) //纯数据
    {

      return await new Promise((resolve, reject) => {
        axios.get(this.$BaseUrl + `/api/ChatGPT/GetMasterComment?contentid=${contentid}&pageindex=${pageindex}&pagesize=${pagesize}&listindex=${listindex}`).then(res => {

          console.log('resolve(res.data.data)', res.data.data);
          resolve(res.data.data)

        }).catch(error => {
          reject(error)
          console.log(error);
        });
      })
    },
    async LoadMoreMasterComment(contentid, listindex) {
      this.IsMovClickThisIndex = contentid
      this.IsShowMasterComment = true
      this.IsShowCommentBox = true

      let pageindex = this.Comments.length
      let pagesize = 5 + pageindex;

      let data = await this.GetComment_DBData(contentid, pageindex, pagesize, listindex)

      if (data.length == 0) {
        this.IsMasterCommentLoadOrNull = false
      }
      else {
        this.IsMasterCommentLoadOrNull = true
      }
      data.forEach(r => {
        if (!this.Comments.some(a => a.commentid == r.commentid)) {
          this.Comments.push(r)
        }
        else {
          console.log('重复对象', r);
        }

      })
    },
    async GetSlavecomment(contentid, parentcommentid, pageindex, pagesize, listindex, parentlistindex) {

      this.IsSlaveMerge = false


      this.IsMovClickThisIndex = contentid
      this.IsShowMasterComment = true
      this.IsShowCommentBox = true

      this.SlaveComments = []

      let data = await this.GetSlavecomment_DBData(contentid, parentcommentid, pageindex, pagesize, listindex, parentlistindex)

      if (data.length == 0) {
        this.IsSlaveCommentLoadOrNull = false
      }
      else {
        this.IsSlaveCommentLoadOrNull = true
      }

      data.forEach(r => {

        if (!this.SlaveComments.some(a => a.commentid == r.commentid)) {
          this.SlaveComments.push(r)
        }
        else {
          console.log('重复对象', r);
        }

      })
    },
    async GetSlavecomment_DBData(contentid, parentcommentid, pageindex, pagesize, listindex, parentlistindex) { //纯数据

      return await new Promise((a, b) => {
        axios.get(this.$BaseUrl + `/api/ChatGPT/GetSlaveComment?contentid=${contentid}&commentparentid=${parentcommentid}&pageindex=${pageindex}&pagesize=${pagesize}&listindex=${listindex}&parentlistindex=${parentlistindex}`)
          .then(res => {
            a(res.data.data)

          }).catch(error => {
            b(error)
            console.log(error);
          });
      })
    },
    async LoadMoreGetSlavecomment(contentid, parentcommentid, listindex, parentlistindex) {
      this.IsMovClickThisIndex = contentid
      this.IsShowMasterComment = true
      this.IsShowCommentBox = true



      let pageindex = this.SlaveComments.length

      console.log('pageindex', pageindex);
      let pagesize = 5 + pageindex;


      let data = await this.GetSlavecomment_DBData(contentid, parentcommentid, pageindex, pagesize, listindex, parentlistindex)

      console.log('IsSlaveCommentLoadOrNulldata.length', data.length);
      if (data.length == 0) {
        this.IsSlaveCommentLoadOrNull = false
      }
      else {
        this.IsSlaveCommentLoadOrNull = true
      }
      data.forEach(r => {

        if (!this.SlaveComments.some(a => a.commentid == r.commentid)) {
          this.SlaveComments.push(r)
        }
        else {
          console.log('重复对象', r);
        }
      })
    },
    ReplyMsg(journal, level, parentcomment, comment) {

      let run_commentindex = 0
      let run_parentcommentindex = -1

      let Reqmastercommentindex = 0 //请求参数
      if (parentcomment != null) {
        Reqmastercommentindex = parentcomment.listindex //主评论索引
      }

      let Journalid = journal.contentid

      let receiveuuids = ''
      let receivenames = ''
      let receiveuserimgs = ''

      receiveuuids = journal.useruuid
      receivenames = journal.username
      receiveuserimgs = journal.userimgurl

      let pushcommentid = '' //当前评论id

      let pushcomment = '' //回复的评论

      let sigreceiveName = ''  //进行中评论
      let sigrelationreceiveuuid = ''

      let req = {}

      if (level == 1) {
        //req.commentid = comment.commentid
        req.comment = this.ThisCommentMsg
        req.username = localStorage.getItem('cacheLoginUserName')
        req.userimgurl = localStorage.getItem("cacheLoginUserImg")
        req.useruuid = localStorage.getItem("cacheLoginuuid")
        //req.time = comment.time
        req.parentid = '0'
        req.level = 1

        pushcommentid = journal.contentid //第一次评论（没有评论id，为文章ID）
        //顶级输入框
        this.IsShowCommentBox = true
      }
      else {
        //req.commentid = comment.commentid
        req.comment = this.ThisCommentMsg
        req.username = localStorage.getItem('cacheLoginUserName')
        req.userimgurl = localStorage.getItem("cacheLoginUserImg")
        req.useruuid = localStorage.getItem("cacheLoginuuid")

        //req.time = comment.time
        if (parentcomment != null && comment != null) {
          req.parentid = parentcomment.commentid + ',' + comment.commentid

          receiveuuids += ',' + parentcomment.useruuid + ',' + comment.useruuid
          receivenames += ',' + parentcomment.username + ',' + comment.username
          receiveuserimgs += ',' + parentcomment.userimgurl + ',' + comment.userimgurl

          pushcommentid = parentcomment.commentid + ',' + comment.commentid //评论id

          pushcomment = comment.comment //回复引用的评论

          run_parentcommentindex = comment.listindex

          sigreceiveName = comment.username
          sigrelationreceiveuuid = comment.useruuid
        }
        else if (parentcomment != null) {
          req.parentid = parentcomment.commentid

          receiveuuids += ',' + parentcomment.useruuid
          receivenames += ',' + parentcomment.username
          receiveuserimgs += ',' + parentcomment.userimgurl

          pushcommentid = parentcomment.commentid //评论id

          pushcomment = parentcomment.comment //回复引用的评论

          sigreceiveName = parentcomment.username
          sigrelationreceiveuuid = parentcomment.useruuid
        }
        req.level = level
      }

      axios.post(this.$BaseUrl + '/api/ChatGPT/AddComment', { contentid: Journalid, masterindex: Reqmastercommentindex, comment: req }).then(async res => {

        let newpushcommentid = res.data.data.commentid
        let newpushcomment = res.data.data

        pushcommentid += ',' + newpushcommentid
        console.log('newpushcommentid', newpushcommentid);

        this.$emit('child-Tips', '发表成功!');

        run_commentindex = newpushcomment.listindex //新评论索引 

        journal.commentcount += 1

        if (level == 1) {

          this.Comments.unshift(newpushcomment)
        }
        else {
          this.SlaveComments.unshift(newpushcomment)
        }


        const uniquereceiveuuids = Array.from(new Set(receiveuuids.split(',')));


        for (let i = 0; i < uniquereceiveuuids.length; i++) {

          if (uniquereceiveuuids[i] == localStorage.getItem("cacheLoginuuid")) {
            continue;
          }


          //发生消息通知
          var sendobj = {
            msgs: this.ThisCommentMsg,
            msgType: 12,
            sendName: localStorage.getItem('cacheLoginUserName'),
            receiveName: sigreceiveName,
            relationreceiveuuid: sigrelationreceiveuuid, //辨别回复的哪个人
            contentid: journal.contentid,
            commentid: pushcommentid,
            comment: pushcomment,
            runcommentindex: run_commentindex,
            runparentcommentindex: run_parentcommentindex, //只有二级评论有效 （找到两个连接线）
            noticetype: 1,
            level: level,
            content: "帖子：" + journal.content.replace(/<\/?[^>]+(>|$)|&nbsp;/g, ""),
            imgUrl: localStorage.getItem("cacheLoginUserImg"),
            senduuid: localStorage.getItem("cacheLoginuuid"),
            receiveuuid: uniquereceiveuuids[i],
            ismy: true,
            time: "",
          };

          this.MyWebSockeSend(sendobj); //发送消息
        }
        this.ThisCommentMsg = ''

      }).catch(error => {

        console.error(error);
      });


    },
    Global() {
      //全局控制
      this.IsShowMasterComment = false;
      //this.IsShowCommentBox = false;
    },
    ILike(item, index) {
      axios
        .get(this.$BaseUrl + `/api/ChatGPT/Ilike?contentid=${item.contentid}`)
        .then((res) => {
          item.like += 1;
          this.$emit("child-Tips", "点赞成功!");

          //发生消息通知
          var sendobj = {
            msgs: "赞了你的作品❤",
            noticetype: 0,
            msgType: 12,
            level: 1,
            comment: "",
            sendName: localStorage.getItem("cacheLoginUserName"),
            receiveName: "",
            contentid: item.contentid,
            content: "帖子：" + item.content,
            imgUrl: localStorage.getItem("cacheLoginUserImg"),
            senduuid: localStorage.getItem("cacheLoginuuid"),
            receiveuuid: item.useruuid,
            ismy: true,
            time: "",
          };

          this.MyWebSockeSend(sendobj); //发送消息
        })
        .catch((error) => {
          console.log(error);
        });
    },

    CommentthisILike(journal, flag, parentcomment, slavecomment) //评论点赞
    {

      let run_commentindex = 0
      let run_parentcommentindex = -1

      let receiveuuids = ''

      let pushcomment = '' //回复的评论

      let pushcommentid = '' //当前评论id

      receiveuuids = journal.useruuid

      let sigreceiveName = ''  //进行中评论
      let sigrelationreceiveuuid = ''


      let req =
      {
        contentid: journal.contentid,
        masterlistindex: parentcomment.listindex,
        mastercommentid: parentcomment.commentid,
        flag: flag
      }
      if (flag == 1) {
        req.slavelistindex = slavecomment.listindex
      }

      axios.post(this.$BaseUrl + `/api/ChatGPT/CommentthisILike`, req).then(res => {

        if (flag == 0) //
        {
          parentcomment.commentlike += 1
          receiveuuids += ',' + parentcomment.useruuid
          pushcommentid = parentcomment.commentid //评论id

          pushcomment = parentcomment.comment //回复引用的评论

          sigreceiveName = parentcomment.username
          sigrelationreceiveuuid = parentcomment.useruuid


          run_commentindex = parentcomment.listindex //评论索引 
          run_parentcommentindex = -1
        }
        else //二级 - 引用对引用
        {
          slavecomment.commentlike += 1
          receiveuuids += ',' + parentcomment.useruuid + ',' + slavecomment.useruuid
          pushcommentid = parentcomment.commentid + ',' + slavecomment.commentid //评论id

          pushcomment = slavecomment.comment //回复引用的评论

          sigreceiveName = slavecomment.username
          sigrelationreceiveuuid = slavecomment.useruuid


          run_commentindex = slavecomment.listindex //新评论索引 
          run_parentcommentindex = slavecomment.listindex
        }

        const uniquereceiveuuids = Array.from(new Set(receiveuuids.split(',')));


        this.$emit('child-Tips', '点赞成功!');

        for (let i = 0; i < uniquereceiveuuids.length; i++) {

          if (uniquereceiveuuids[i] == localStorage.getItem("cacheLoginuuid")) {
            continue;
          }

          //发生消息通知
          var sendobj = {
            msgs: '评论❤',
            msgType: 12,
            sendName: localStorage.getItem('cacheLoginUserName'),
            receiveName: sigreceiveName,
            relationreceiveuuid: sigrelationreceiveuuid, //辨别回复的哪个人
            contentid: journal.contentid,
            commentid: pushcommentid,
            comment: pushcomment,
            noticetype: 0,
            level: 2,
            runcommentindex: run_commentindex,
            runparentcommentindex: run_parentcommentindex, //只有二级评论有效 （找到两个连接线）
            content: "帖子：" + journal.content.replace(/<\/?[^>]+(>|$)|&nbsp;/g, ""),
            imgUrl: localStorage.getItem("cacheLoginUserImg"),
            senduuid: localStorage.getItem("cacheLoginuuid"),
            receiveuuid: uniquereceiveuuids[i],
            ismy: true,
            time: "",
          };

          this.MyWebSockeSend(sendobj); //发送消息
        }


      }).catch(error => {

        console.log(error);
      });
    },
    Codeformat() {
      //代码高亮显示
      this.$nextTick(() => {
        const blocks = this.$el.querySelectorAll("pre code");
        Array.from(blocks).forEach((block) => {
          hljs.highlightBlock(block);
          // 查找同级元素
          const sibling = block.parentNode.querySelectorAll(".copy-btn");

          if (sibling.length < 1) {
            const button = document.createElement("span");
            button.textContent = "";
            button.classList.add("copy-btn");
            block.parentNode.insertBefore(button, block.nextSibling);
            button.addEventListener("click", (event) => {
              // 获取要复制的数据

              //提示
              this.Tips("复制成功！");

              const data = block.textContent.trim();
              //const data = 'Hello, world!'
              this.$copyText(data).then(
                function () {
                  //console.log('Copied:', data)
                },
                function () {
                  //console.error('Copy failed:', data)
                }
              );
            });
          }
        });

        const pres = this.$el.querySelectorAll("pre");
        Array.from(pres).forEach((pre) => {
          //移入事件
          pre.addEventListener("mouseover", (event) => {
            const blocks2 = event.target.querySelectorAll("pre code");
            Array.from(blocks2).forEach((block2) => {
              const copybtns = block2.parentNode.querySelectorAll(".copy-btn");
              Array.from(copybtns).forEach((copybtn) => {
                copybtn.textContent = "copy";
              });
            });
          });

          //移出事件
          pre.addEventListener("mouseleave", (event) => {
            const blocks2 = this.$el.querySelectorAll("pre code");
            Array.from(blocks2).forEach((block2) => {
              const copybtns = block2.parentNode.querySelectorAll(".copy-btn");
              Array.from(copybtns).forEach((copybtn) => {
                copybtn.textContent = "";
              });
            });
          });
        });
      });
    },
    Tips(title) {
      const bubbleWrapper = document.createElement("div");
      bubbleWrapper.classList.add("bubble-wrapper");
      document.body.appendChild(bubbleWrapper);
      const bubble = document.createElement("div");
      bubble.classList.add("bubble");
      bubble.innerHTML = title;
      bubbleWrapper.appendChild(bubble);
      setTimeout(function () {
        bubbleWrapper.remove();
      }, 1400);
    },
    formatTime(time) {
      const now = new Date();
      const target = new Date(time);
      const diff = now.getTime() - target.getTime();
      const hour = target.getHours();
      let minute = target.getMinutes();
      const day = target.getDate();
      const week = target.getDay();

      if (minute < 10) {
        minute = "0" + minute;
      }

      if (diff < 0) {
        // 未来时间
        return target.toLocaleString();
      }

      if (diff < 60 * 1000) {
        // 一分钟内
        return "刚刚";
      }

      if (diff < 60 * 60 * 1000) {
        // 一小时内
        return `${Math.floor(diff / (60 * 1000))}分钟前`;
      }

      if (diff < 24 * 60 * 60 * 1000) {
        // 一天内
        if (hour < 12) {
          return `上午 ${hour}:${minute}`;
        } else if (hour < 18) {
          return `下午 ${hour - 12}:${minute}`;
        } else {
          return `晚上 ${hour - 12}:${minute}`;
        }
      }

      if (diff < 2 * 24 * 60 * 60 * 1000) {
        // 昨天
        return `昨天 ${hour}:${minute}`;
      }

      if (diff < 7 * 24 * 60 * 60 * 1000) {
        // 一周内
        const weeks = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
        return `${weeks[week]} ${hour}:${minute}`;
      }

      if (now.getFullYear() === target.getFullYear()) {
        // 同一年
        return `${target.getMonth() + 1}月${day}日 ${hour}:${minute}`;
      } else {
        return `${target.getFullYear()}年${target.getMonth() + 1
          }月${day}日 ${hour}:${minute}`;
      }
    },

    KKs(r) {
      let mytopimgHeight = this.$refs.mytopimg.offsetHeight;
      let usercontentHeight = this.$refs.usercontent.offsetHeight;
      if (r.srcElement.scrollTop > mytopimgHeight + usercontentHeight) {
        this.IsBottomOver = true;
      } else {
        this.IsBottomOver = false;
      }
    },
    SetImg() {
      this.$refs.inputfile.dispatchEvent(new MouseEvent("click"));
    },
    EditBook(
      item,
      index //编辑
    ) {
      this.IsPublishOREdit = false;
      this.IsShowMain = false;
      this.content = item.content;
      this.EditIndex = item.contentid;
    },
    async EditPublish() {
      console.log(this.EditIndex);

      let req = {
        userimgurl: localStorage.getItem("cacheLoginUserImg"),
        contentid: this.EditIndex,
        content: this.content,
        top: this.IsTop ? 99 : 0,
      };
      axios
        .post(this.$BaseUrl + "/api/ChatGPT/EditJournal", req)
        .then(async (res) => {
          console.log(res);
          this.IsShowMain = true;
          await this.GetData(this.ThisLocalMyLoginuuId);
          this.$emit("child-Tips", "修改成功!");
          this.content = "";
          this.IsShowpreview = false;
          this.Codeformat();
        })
        .catch((error) => {
          console.log(error);
        });
    },
    Cancel() {
      this.IsShowMain = true;
      this.IsShowpreview = false;
    },
    MainSet() {
      this.IsShowMain = !this.IsShowMain;
      this.IsPublishOREdit = true;
    },
    PreviewMd() {
      this.IsShowpreview = !this.IsShowpreview;
      this.Codeformat();
    },
    async handleFileChange(e) {
      return await new Promise(async (resolve, reject) => {
        //let file = e.target.files;
        let filename = "";
        let filetype = "";
        let file = e.target.files[0];
        filename = file.name;
        filetype = file.type;

        let prefilename = file.name

        let fileSizeInKB = Math.round(file.size / 1024);
        //console.log('默认size', fileSizeInKB);

        if (fileSizeInKB > 500 && fileSizeInKB <= 1000) {
          file = await this.CanvascompressImage(
            e.target.files[0],
            0.7,
            1920,
            1080
          );
          fileSizeInKB = Math.round(file.size / 1024);
          //console.log('压缩后size1', fileSizeInKB);
        } else if (fileSizeInKB > 1000 && fileSizeInKB <= 1500) {
          file = await this.CanvascompressImage(
            e.target.files[0],
            0.6,
            1920,
            1080
          );
          fileSizeInKB = Math.round(file.size / 1024);
          //console.log('压缩后size2', fileSizeInKB);
        } else if (fileSizeInKB > 1500) {
          file = await this.CanvascompressImage(
            e.target.files[0],
            0.5,
            1920,
            1080
          );
          fileSizeInKB = Math.round(file.size / 1024);
          //console.log('压缩后size3', fileSizeInKB);
        }
        // let reader = new FileReader();
        // reader.readAsDataURL(file);
        // reader.onload = () => {
        //     let dataURL = reader.result;
        //     this.LoginUserImg = dataURL
        // };

        const fileddl = new File([file], filename, { type: filetype });
        // 创建FormData对象
        var formData = new FormData();
        // 添加文件到formData对象中
        formData.append('foldername', 'journals');
        formData.append('filename', prefilename);
        formData.append("file", fileddl);
        // 发送POST请求
        //url: 'https://api.xiaoshagua.top/api/File/Upload',
        axios
          .post(this.$BaseUrl+"/api/File/Upload", formData)
          .then((res) => {
            console.log("res.data.data", res.data);

            this.content += `<img style="border-radius: 5px;" src="${res.data.data}" alt="">`;

            resolve(this.LoginUserImg);
          })
          .catch((error) => {
            reject(error);
            console.log(error);
          });
      });
    },
    CanvascompressImage(file, thisquality, maxWidth, maxHeight) {
      return new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = () => {
          const canvas = document.createElement("canvas");
          let width = img.width;
          let height = img.height;

          if (width > maxWidth) {
            height *= maxWidth / width;
            width = maxWidth;
          }

          if (height > maxHeight) {
            width *= maxHeight / height;
            height = maxHeight;
          }

          canvas.width = width;
          canvas.height = height;

          const ctx = canvas.getContext("2d");
          ctx.drawImage(img, 0, 0, width, height);

          canvas.toBlob(
            (blob) => {
              resolve(blob);
            },
            file.type,
            thisquality // 压缩质量，可以根据需要调整
          );
        };

        img.onerror = reject;

        img.src = URL.createObjectURL(file);
      });
    },
    // 准备富文本编辑器
    onEditorReady(quill) {
      // console.log('准备富文本编辑器');
      quill.root.addEventListener(
        "paste", //粘贴事件， 把图片上传转为 url
        (evt) => {
          if (
            evt.clipboardData &&
            evt.clipboardData.files &&
            evt.clipboardData.files.length
          ) {
            evt.preventDefault();
            [].forEach.call(evt.clipboardData.files, (file) => {
              if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
                return;
              }

              let prefilename = file.name
              const formData = new FormData();
              formData.append('foldername', 'journals');
              formData.append('filename', prefilename);
              formData.append("file", file);
              axios
                .post(this.$BaseUrl + "/api/File/Upload", formData)
                .then((res) => {
                  if (res.data.code == 200) {
                    console.log(res.data.data);
                    // window.open(res.data.data.src)
                    let length = quill.getSelection().index; //光标位置
                    // 插入图片地址
                    quill.insertEmbed(length, "image", res.data.data);
                    // 光标后移一位
                    quill.setSelection(length + 1);
                  } else {
                    console.log(res.data);
                  }
                });
            });
          }
        },
        false
      );
    },

    //失去焦点事件
    onEditorBlur(quill) {
      console.log("editor blur!", quill);
    },
    //获得焦点事件
    onEditorFocus(quill) {
      console.log("editor focus!", quill);
    },
    //内容改变事件
    handleChange(event) { },
    handleEditorInput(value) {
      //console.log(value);
      //console.log(this.$refs.myQuillEditor.quill);
    },
    setShow() {
      this.Setcontent = true;
    },
    setHide() {
      this.Setcontent = false;
    },
  },
};
</script>

<style scoped  >
.base {
  width: 100%;
  height: 100%;
  overflow: auto;
  scrollbar-width: none;
  box-sizing: border-box;
}

.base::-webkit-scrollbar {
  width: 0px;
}

.base::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #c3c4c6;
  /*滚动条颜色*/
}

.base::-webkit-scrollbar-track {}

.content {
  width: 100%;
  display: flex;
  flex-direction: column;
}




.mytopimg {
  height: 190px;
  background-color: #007aff;
  border-radius: 5px;
}

.bgcimg {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

.myuserImg {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  position: absolute;
  top: -42px;
  right: 30px;
  z-index: 9999;
}

.mybottom {
  position: relative;
  flex: 1;
  z-index: 2;
  width: 100%;
  background-color: #f5f5f5;
}

.myset {
  color: #fcfffd;
  position: absolute;
  top: 25px;
  right: 16px;
  z-index: 999;
  width: 40px;
  font-size: 23px;
  display: flex;
  align-content: center;
  justify-content: center;
}

.usercontent {
  height: 53px;
  padding-top: 13px;
  display: flex;
  flex-direction: column;
  padding-right: 5px;
}

.usercontenttop {
  color: #fcfffd;
  display: flex;
  height: 25px;
  justify-content: flex-end;
  align-items: center;
}

.usercontenttop_name {
  font-size: 20px;
  font-weight: 600;
  line-height: 25px;
}

.usercontenttop_Edit {
  padding: 0 5px;
  margin-right: 8px;
  height: 20px;
  line-height: 20px;
  border-radius: 15px;
  font-size: 12px;
  margin-left: 5px;
  background-color: #292735;
}

.usercontentmit {
  margin: 2px 0;
  height: 22px;
  color: #23212f;
  font-size: 12px;
  display: flex;
  justify-content: flex-end;
  line-height: 22px;
}

.usercontentbottom {
  display: flex;
  height: 26px;
  justify-content: flex-end;
}

.usercontentbottom_numId {
  padding: 0 5px;
  /* color: #fcfffd; */
  color: #23212f;
  font-size: 12px;
  border-radius: 16px;
  height: 20px;
  /* line-height: 20px;
  text-align: center; */
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: #3e3f44; */
  background-color: #e6e5e5;
  margin-left: 8px;
}

.usercontentbottom_Age {
  padding: 0 5px;
  color: #23212f;
  font-size: 12px;
  border-radius: 16px;
  height: 20px;
  /* line-height: 20px; */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e6e5e5;
  margin-left: 8px;
}

.usercontentbottom_Age:hover
{
  cursor: pointer;
}

.fenlei {
  color: #ffffff;
  width: 100%;
  background-color: #e6e5e5;
  padding-left: 18px;
  font-size: 13px;
  height: 1px;
  line-height: 22px;
  box-sizing: border-box;
}

.lineset {
  width: 100%;

  box-sizing: border-box;
  font-size: 16px;
  font-weight: 600;
  color: #23212f;
  padding-left: 18px;
  display: flex;
  justify-content: flex-end;
  margin: 0;
  padding: 5px 0;
  padding-right: 5px;
}

.setcontent {
  width: 70%;
  height: 100vh;
  background-color: #e6e5e5;
  position: absolute;
  z-index: 9988;
  right: 0;
  display: block;
  transition: all 1s;
}

.SetHidecss {
  transition: all 1s;
  padding-top: 0;
  width: 0;
  z-index: 9988;
  height: 100vh;
  display: none;
  top: 0;
  right: 0;
  position: absolute;
 
}

.setitem {
  width: 100%;
  box-sizing: border-box;
  height: 40px;
  background-color: #c3c4c6;
  text-align: left;
  line-height: 40px;
  font-size: 16px;
  font-weight: 600;
  color: #151615;
  padding-left: 18px;
  margin: 15px 0;
}

.setHideitem {
  display: none;
}

.TopTopOver {
  color: #151615;
  position: absolute;
  background-color: #c3c4c6;
  width: 100%;
  z-index: 999900;
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 18px;
}

.TopTopOver img {
  margin-right: 5px;
  margin-bottom: 5px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  vertical-align: middle;
}

/* 说说 */
.shuoshuoAll {
  width: 100%;
  /* padding: 14px; */
  box-sizing: border-box;
}

.shuo_img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.shuoIMGAllAndSig {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.shuoIMGAllAndSig::after {
  content: "  ";
  width: 220rpx;
  height: 220rpx;
  border-radius: 6px;
}

.ilke,
.sendcommit,
.slavecomment,
.commentbox,
.loadMore,
.loadcomment,
.edit:hover {
  cursor: pointer;
}


/* p 标签 */
/* .journalbox .markdown-body p{
    margin: 0;
}
#preview .markdown-body p{
    margin: 0;
} */


/* H标签 */
.journalbox .markdown-body h1,
.journalbox .markdown-body h2, 
.journalbox .markdown-body h3,
.journalbox .markdown-body h4,
.journalbox .markdown-body h5,
.journalbox .markdown-body h6{
    margin: 6px 0 !important;
}

#preview .markdown-body h1,
#preview .markdown-body h2, 
#preview .markdown-body h3,
#preview .markdown-body h4,
#preview .markdown-body h5,
#preview .markdown-body h6{
    margin: 6px 0 !important;
}


.myset,.setitem:hover
{
  cursor: pointer;
}


.drawer-enter-active, .drawer-leave-active {
  transition: all 0.5s;
}
.drawer-enter, .drawer-leave-to {
  transform: translateX(100%);
}



.editcontent::-webkit-scrollbar {
    width: 3px;
}

.editcontent::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #c3c4c6;
    /*滚动条颜色*/
}

.editcontent::-webkit-scrollbar-track {}

#edittextarea {}

#edittextarea::-webkit-scrollbar {
    width: 3px;
}

#edittextarea::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #c3c4c6;
    /*滚动条颜色*/
}

#edittextarea::-webkit-scrollbar-track {}

</style>
